<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .search-section {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
    }
    .search-section .form-group {
      margin-bottom: 15px;
    }
    input[type="button"] {
      background-color: #28a745;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
    }
    input[type="button"]:hover {
      background-color: #218838;
    }
    .tabs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      gap: 5px;
    }
    .tab-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #f8f9fa;
      font-size: 12px;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      flex: 1 1 auto;
    }
    .tab-button.active {
      background-color: #007bff;
      color: white;
    }
    .month-tabs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      gap: 5px;
      margin-top: 10px;
    }
    .month-tab-button {
      padding: 4px 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #e9ecef;
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      text-align: center;
      flex: 1 1 auto;
    }
    .month-tab-button.active {
      background-color: #007bff;
      color: white;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
      font-size: 14px;
    }
    th {
      background-color: #007bff;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #e2e6ea;
    }
    .delete-button {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
    }
    .delete-button:hover {
      background-color: #c82333;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="search-section">
      <div class="form-group search">
        <label for="search-name">Search by Name:</label>
        <input type="text" id="search-name" onkeyup="filterTable()" placeholder="Search for names..." required>
      </div>

      <div class="form-group search">
        <label for="search-date">Search by Date:</label>
        <input type="date" id="search-date" onchange="filterTable()" required>
      </div>

      <input type="button" class="refresh-button" value="Refresh" onclick="fetchData()">

      <h2>Submitted Data</h2>
      <div class="tabs" id="year-tabs"></div>
      <div id="month-tabs" class="month-tabs"></div>
      <div id="data-table"></div>
    </div>
  </div>

  <script>
    const months = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];
    
    const years = [2023, 2024]; // Add more years as needed

    function fetchData() {
      google.script.run.withSuccessHandler(displayData).getData();
    }

    function displayData(data) {
      const yearTabs = document.getElementById('year-tabs');
      const monthTabs = document.getElementById('month-tabs');
      const dataTable = document.getElementById('data-table');

      yearTabs.innerHTML = '';
      monthTabs.innerHTML = '';
      dataTable.innerHTML = '';

      // Create year tabs
      years.forEach(year => {
        const yearTab = document.createElement('div');
        yearTab.className = 'tab-button';
        yearTab.textContent = year;
        yearTab.onclick = () => showYearTab(year);
        yearTabs.appendChild(yearTab);
      });

      // Determine the current month and year
      const now = new Date();
      const currentMonth = months[now.getMonth()];
      const currentYear = now.getFullYear();

      function showYearTab(year) {
        yearTabs.querySelectorAll('.tab-button').forEach(button => {
          button.classList.remove('active');
        });
        yearTabs.querySelector(`.tab-button:nth-child(${years.indexOf(year) + 1})`).classList.add('active');
        
        // Create month tabs for the selected year
        monthTabs.innerHTML = '';
        months.forEach((month, index) => {
          const monthTab = document.createElement('div');
          monthTab.className = 'month-tab-button';
          monthTab.textContent = month.substring(0, 3); // Shorten month names
          monthTab.onclick = () => showMonthTab(month, year);
          monthTabs.appendChild(monthTab);
        });

        // Show the current month by default
        showMonthTab(currentMonth, year);
      }

      function showMonthTab(month, year) {
        monthTabs.querySelectorAll('.month-tab-button').forEach(button => {
          button.classList.remove('active');
        });
        monthTabs.querySelector(`.month-tab-button:nth-child(${months.indexOf(month) + 1})`).classList.add('active');
        
        const filteredData = data.filter(row => {
          const rowDate = new Date(row[1]);
          return rowDate.getMonth() === months.indexOf(month) && rowDate.getFullYear() === year;
        });

        // Create table
        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        // Create table header
        const headers = ['#', 'Name', 'Date', 'Duration', 'Reason', 'Action'];
        const headerRow = document.createElement('tr');
        headers.forEach(headerText => {
          const th = document.createElement('th');
          th.textContent = headerText;
          headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        
        // Create table body
        filteredData.forEach((row, index) => {
          const tr = document.createElement('tr');
          const rowNumber = index + 1;

          // Add row number cell
          const cellNumber = document.createElement('td');
          cellNumber.textContent = rowNumber;
          tr.appendChild(cellNumber);

          row.forEach(cellData => {
            const td = document.createElement('td');
            td.textContent = cellData;
            tr.appendChild(td);
          });

          // Create delete button
          const deleteButton = document.createElement('button');
          deleteButton.className = 'delete-button';
          deleteButton.textContent = 'Delete';
          deleteButton.onclick = () => deleteRow(row[1], tr); // Pass date and row for deletion

          const actionCell = document.createElement('td');
          actionCell.appendChild(deleteButton);
          tr.appendChild(actionCell);

          tbody.appendChild(tr);
        });

        table.appendChild(thead);
        table.appendChild(tbody);
        dataTable.innerHTML = '';
        dataTable.appendChild(table);
      }

      showYearTab(currentYear);
    }

    function deleteRow(date, tr) {
      if (confirm('Are you sure you want to delete this entry?')) {
        google.script.run.withSuccessHandler(() => {
          tr.remove(); // Remove the row from the table after deletion
        }).deleteData(date); // Call the delete function
      }
    }

    function filterTable() {
      const searchName = document.getElementById('search-name').value.toLowerCase();
      const searchDate = document.getElementById('search-date').value;

      const rows = document.querySelectorAll('#data-table table tbody tr');

      rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const name = cells[1].textContent.toLowerCase();
        const date = cells[2].textContent;

        if ((searchName === '' || name.includes(searchName)) &&
            (searchDate === '' || date === searchDate)) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    }

    window.onload = fetchData;
  </script>
</body>
</html>
